<template>
  <div class="person">
    <h2>name: {{ name }}</h2>
    <h2>age: {{ age }}</h2>
    <h2>tel: {{ tel }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>

    <button @click="showTel">查看电话</button>
  </div>
</template>

<script lang="ts">
export default {
  name: "Person",
   setup(){
    //set up函数种的this是不可识别的，Vue3种弱化了this
    //data

     let name='ljw' //name 非响应式
     let age=19 //age 非响应式
     let tel='eawea'

     //方法
     function changeName(){
       name="罗佳维" //有变化但是不是响应式的所以看不到

     }
     function changeAge(){
       age+=1 //
     }
     function showTel(){
       alert(tel)
     }


     return{name,age,changeName,changeAge,showTel}
   }

}
</script>
<style>
button{
  margin: 5px;
}
body{
  background-color: pink;
}
</style>